<template>
  <span>
    Hi! 欢迎来到闲置购物平台，
    <a v-if="!isLoggedIn" @click="$router.push('/userlogin')"
      >请登录【免费注册】</a
    >
    <span v-else>请放心使用<a @click="loginOff()">【退出登录】</a></span>
  </span>
  <span>
    <a @click="$router.push('/userperson')">个人中心</a>
    <a @click="$router.push('/usercart')">我的购物车</a>
    <a @click="$router.push('/usershell')">我的售卖品</a>
  </span>
</template>

<script>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const router = useRouter();

    let isLoggedIn = computed(() => {
      const user = localStorage.getItem("user");
      return !!user;
    });

    const loginOff = () => {
      router.push({ path: "/userlogin" });
      localStorage.removeItem("user");
      ElMessage.success("退出登录成功");
    };

    return { isLoggedIn, loginOff };
  },
};
</script>

<style>
.homeHead {
  display: flex;
  width: 100%;
  font-size: 100%;
  background-color: #e6e6e6;
}

.homeHead span:nth-child(1) {
  width: 50%;
  text-align: center;
  color: #424242;
}

.homeHead span a:nth-child(1) {
  color: #ff5b5b;
}

.homeHead span a:hover {
  color: #ff0000;
}

.homeHead span:nth-child(2) {
  margin-left: 10%;
  text-align: center;
  width: 30%;
}

.homeHead span:nth-child(2) a {
  color: #424242;
  margin-inline: 5%;
}
</style>